<template>
  <a-row class="h100 pos-rel" style="overflow: hidden">
    <div class="bg-img pos-abs"></div>
    <!-- 左侧文件树 -->
    <a-col :span="left" class="h100 bg-left">
      <div class="clearfix pad10 h100" style="overflow: auto">
        <a-row>
          <a-input-search
            placeholder="输入搜索内容，回车搜索"
            enter-button
            @search="onSearch"
            style="width: 100%"
            :loading="loading"
          />
        </a-row>
        <a-row>
          <a-tree :treeData="treeData" @select="onSelect" />
        </a-row>
      </div>
    </a-col>

    <!--右侧缩略图-->
    <a-col :span="right" class="h100">
      <a-card class="h100 overflow-auto pos-rel">
        <i class="pos-abs show-icon" @click="showHide"><img src="./menu2.png" style="width: 20px; opacity: 0.8"/></i>
        <h2>{{ article.wenzbt }}</h2>
        <a-divider />
        <p style="padding-left:40px;padding-right:40px;" v-html="article.wenznr"></p>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { getAction } from '@/api/manage'

export default {
  data() {
    return {
      loading: false,
      article: {},
      allTreeKeys: [],
      treeData: [],
      left: 5,
      right: 19,
      selectedKeys: [],
      isTreeShow: false
    }
  },

  mounted() {},
  created() {
    this.$nextTick(() => {
      // 禁用右键
      document.oncontextmenu = new Function('event.returnValue=false')
      // 禁用选择
      document.onselectstart = new Function('event.returnValue=false')
    })

    let that = this

    this.loading = true
    getAction('/zhisk/zhiskLanm/queryTreeList', { key: null })
      .then(res => {
        if (res.success) {
          for (let i = 0; i < res.result.length; i++) {
            let temp = res.result[i]
            that.treeData.push(temp)
            this.setThisExpandedKeys(temp)
          }
        }
      })
      .finally(() => {
        this.loading = false
      })
  },
  methods: {
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.allTreeKeys.push(node.id)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    onSearch(value) {
      let that = this
      console.log(value)

      this.loading = true
      getAction('/zhisk/zhiskLanm/queryTreeList', { key: value })
        .then(res => {
          if (res.success) {
            if (res.result.length == 0) {
              this.$message.warning('没找到')
              return
            }
            this.allTreeKeys = []
            that.treeData = []
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i]
              that.treeData.push(temp)
              that.setThisExpandedKeys(temp)
            }
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    showHide() {
      this.isTreeShow = !this.isTreeShow
      if (this.isTreeShow) {
        this.left = 0
        this.right = 24
      } else {
        this.left = 5
        this.right = 19
      }
    },
    onSelect(selectedKeys) {
      console.log(selectedKeys)
      if (!selectedKeys || selectedKeys.length == 0) return
      getAction('/zhisk/zhiskLanm/queryZhiskWenzByMainIdWithP', { id: selectedKeys[0] }).then(res => {
        console.log(res)
        if (res.success && res.result.length > 0) {
          this.article = res.result[0]
        } else {
          this.$message.warning(res.message)
          this.article = {}
        }
      })
    }
  }
}
</script>

<style scoped>
.bg-img {
  background: url(logo.png) repeat center center;
  left: -50%;
  right: 0px;
  top: -50%;
  bottom: 0px;
  width: 200%;
  height: 200%;
  transform: rotate(341deg);
  -ms-transform: rotate(341deg); /* Internet Explorer */
  -moz-transform: rotate(341deg); /* Firefox */
  -webkit-transform: rotate(341deg); /* Safari 和 Chrome */
  -o-transform: rotate(341deg); /* Opera */
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
.fxl {
  float: left;
}
.fxr {
  float: right;
}
.pos-rel {
  position: relative;
}
.pos-abs {
  position: absolute;
}
.h100 {
  height: 100%;
}
.bg-left {
  border-right: 1px solid #ddd;
  background-color: rgba(0, 0, 0, 0.05);
  transform: translateX(0);
  transition: 0.5s transform;
}
.pad10 {
  padding: 10px;
}
.overflow-auto {
  overflow: auto;
}
.show-icon {
  cursor: pointer;
  padding: 10px;
  display: inline-block;
  top: 0px;
  left: 0px;
}
/deep/.h100 .ant-card-body {
  padding: 10px;
  height: 100%;
  position: relative;
}
/deep/.h100 .ant-card-body h2 {
  text-align: center;
  padding: 10px;
}
/deep/.h100 .ant-card {
  background: transparent;
}
</style>
